<template>
  <div class="enterprise-mail" v-if="list">
		<el-table :data="list" v-show="list.length" size="mini">
			<el-table-column
        prop="from"
        label="邮件名称"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
       >
      </el-table-column>
			<el-table-column
        prop="updateTime"
        label="更新时间"
       >
      </el-table-column>
      <el-table-column
        prop="oprate"
        label="操作">
				<template scope="scope">
          <el-button type="text" @click="edit(scope.row)" size="small">重新设置</el-button>
        </template>
      </el-table-column>
		</el-table>
		<ul v-show="!list.length" class="mail-list">
			<li @click="selectMail('qq')"><img class="mail-icon" src="../../../../assets/qqmail@2x.png">QQ邮箱</li>
			<li @click="selectMail('exmail')"><img class="mail-icon" src="../../../../assets/exmail@2x.png">企业邮箱</li>
			<li @click="selectMail('other')"><i class="mail-icon iconfont icon-gongzuotaiyoujian
"></i>其他邮箱</li>
		</ul>
		<el-drawer
			:visible="visible"
			direction="rtl"
			:wrapperClosable="false"
      size="360px"
			:before-close="handleClose">
      <span slot="title" class="title">绑定发送邮箱</span>
			<div class="form-wrap">
				<span class="sub-title">{{mailMap[activeType].name}}设置</span>
				<el-form 
					ref="form"
					:model="form"
					size="small"
					:rules="rules">
				<el-form-item prop="from" label="邮箱地址">
					<el-input type="text" v-model="form.from" @blur="autoShowSMTP" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')" placeholder="请输入邮箱"/>
				</el-form-item>
				<el-form-item prop="pass" :label="(activeType === 'other'? '密码/授权码': '授权码')">
					<a class="label-help" v-show="activeType !== 'other'" href="https://service.mail.qq.com/cgi-bin/help?subtype=1&&id=28&&no=1001256" target="_blank">如何获取授权码</a>
					<el-input type="text" v-model="form.pass" show-password autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly')"/>
				</el-form-item>
				<el-form-item label="SMTP服务器">
          <a class="label-help" href="https://note.youdao.com/ynoteshare1/index.html?id=b4b40b87d5c9b90b5b0a27e1f105a94f&type=note" target="_blank">获取SMTP服务器</a>
          <div style="display: flex; width: 100%">
						<el-form-item prop="host" style="width: 200px;display:inline-block">
							<el-input type="text" v-model="form.host" placeholder="请输入服务器地址"/>
						</el-form-item>
						<el-form-item prop="port" style="width: 100px;display:inline-block; padding-left: 10px">
							<el-input type="text" v-model="form.port" placeholder="端口号"/>
						</el-form-item>
					</div>
				</el-form-item>
				<el-form-item prop="secureConnection" style="margin-top: -30px">
					<el-checkbox v-model="form.secureConnection" @change="autoShowSMTP">安全连接</el-checkbox>
				</el-form-item>
			</el-form>
					<el-alert
						type="success"
						v-if="alertStatus !== null"
						v-show="alertStatus"
						:closable="false">
						<span slot="title"><i class="el-icon-loading"></i> &nbsp;验证信息中…</span>
					</el-alert>
					<el-alert
						type="error"
						v-if="alertStatus !== null"
						v-show="!alertStatus"
						:closable="false"
						show-icon>
						<span slot="title">邮箱地址、{{activeType === 'other'? '密码/授权码': '授权码'}}或SMTP服务器输入有误！</span>
					</el-alert>
			</div>
				<div class="footer">
					<el-button class="primary_btn" @click="handleClose">取消</el-button>
					<el-button class="primary_btn" type="primary" @click="save">保存</el-button>
				</div>
		</el-drawer>
  </div>
</template>
<script>
	import API from '../../../../store/api/config/emailNotify.js'
  export default {
    name: 'enterpriseMail',
    data () {
      return {
				alertStatus: null, // null全不展示 , true展示loading，false展示error
				visible: false,
				list: null,
				activeType: 'qq',
				mailMap: {
					qq: {name: 'QQ邮箱', type: 'email', smtp: 'smtp.qq.com', port: [465, 587]},
					exmail: {name: '腾讯企业邮箱', smtp: 'smtp.exmail.qq.com', port: [465, 587]},
					other: {name: '其他邮箱', smtp: '', port: []}
				},
				smtpMap: {
					aliyun: {smtp: 'smtp.aliyun.com', port: [465, 25]},
					exmail: {name: '企业邮箱', smtp: 'smtp.exmail.qq.com', port: [465, 587]},
					qq: {name: 'qq邮箱', smtp: 'smtp.qq.com', port: [465, 587]},
					sina: {name: 'qq邮箱', smtp: 'smtp.sina.com', port: [25, 25]},
					'163': {name: 'qq邮箱', smtp: 'smtp.163.com', port: [25, 25]},
					'126': {name: 'qq邮箱', smtp: 'smtp.126.com', port: [25, 25]},
					foxmail: {name: 'qq邮箱', smtp: 'smtp.foxmail.com', port: [25, 25]},
					sohu: {name: 'qq邮箱', smtp: 'smtp.sohu.com', port: [25, 25]},
				},
				form: {
					_id: '',
					from: '',
					pass: '',
					host: '',
					port: '',
					secureConnection: true
				},
				rules: {
					from: [
						{required: true, message: this.$t('validate.required'), trigger: 'blur'},
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
					],
					pass: [
						{required: true, message: this.$t('validate.required'), trigger: 'blur'}
					],
					host: [
						{required: true, message: this.$t('validate.required'), trigger: 'blur'}
					],
					port: [
						{required: true, message: this.$t('validate.required'), trigger: 'blur'}
					]
				}
      }
    },
    methods: {
			edit (data) {
				this.$confirm('确定要重置企业邮箱吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
					this.$refs.form && this.$refs.form.resetFields()
					this.alertStatus = null
					this.form._id = data._id
					this.list = []
        }).catch(() => {})
			},
			deleteItem () {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delLinkUrlCfg', {_id: itemId})
          .then(() => {
            this.$message.success('删除成功')
            this.getOutLinkList(this.pagination.currentPage || 1)
          })
        })
			},
			selectMail (type) {
				this.activeType = type
				this.visible = true
				this.alertStatus = null
				this.$refs.form && this.$refs.form.resetFields()
			},
			handleClose () {
				this.visible = false
			},
			getList () {
				API.queryEmailList({}).then((res) => {
					if (res.success) {
						this.list = res.data
					} else {
						this.list = []
					}
				})
			},
			autoShowSMTP () {
				this.$refs.form.validateField('from', (valid) => {
					if (!valid) {
						let email = this.form.from
						let site = email.split('@')[1].split('.')[0]
						if (this.smtpMap[site]) {
							this.form.host = this.smtpMap[site].smtp
							let portIndex = this.form.secureConnection ? 0 : 1
							this.form.port = this.smtpMap[site].port[portIndex]
							this.$refs.form.clearValidate(['port', 'host'])
						}
					}
				})
			},
			save () {
				this.$refs.form.validate((valid) => {
          if (valid) {
						this.alertStatus = true
						if (!this.form._id) {
							delete this.form._id
						}
						API.editEmailConfig(this.form).then((res) => {
							if (res.success) {
								this.alertStatus = null
								this.$message.success('配置成功')
								this.handleClose()
								this.getList()
							} else {
								this.alertStatus = false
							}
						})
          }
        })
			}
    },
    components: {
    },
    beforeMount () {
			this.getList()
    },
    computed: {
    },
    mounted () {
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../../assets/common.styl"
.enterprise-mail
  padding 20px 5px
	.form-wrap
		padding 0 20px
		box-sizing border-box
		height calc(100vh - 128px)
		overflow-y auto
		.sub-title
			font-size 14px
			color #000
			display block
			padding-bottom 10px
.label-help
  float right
  font-size 12px
  padding-top 10px
  line-height 8px
.title
  font-size 14px
  color #000
.footer
	position absolute
	bottom 0
	right 0	
	box-sizing border-box
	width 100%
	border-top 1px solid #efefef
	height 50px
	text-align center
	padding-top 13px
.mail-list
	li
		width 320px
		margin-bottom 20px
		border 1px solid #eee
		line-height 40px
		&:hover
			cursor pointer
		img
			width 20px
			float left
			padding 10px
		i
			font-size 20px
			float left
			color $c-main
			padding 0 10px	
</style>